<script setup>
import { message } from 'ant-design-vue';
import { onMounted, reactive, ref, toRaw } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import {
	getProductList,
	addProgram,
	updateProgram,
	getVendorList
} from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const formRef = ref();
const data = ref([]);
const vendorList = ref([]);
const labelCol = {
	span: 5
};
const wrapperCol = {
	span: 13
};
const state = reactive({
	formState: {
		programName: ''
	}
});
const rules = {
	name: [
		{
			required: true,
			message: 'Please input Activity name',
			trigger: 'change'
		},
		{
			min: 3,
			max: 5,
			message: 'Length should be 3 to 5',
			trigger: 'blur'
		}
	],
	region: [
		{
			required: true,
			message: 'Please select Activity zone',
			trigger: 'change'
		}
	],
	date1: [
		{
			required: true,
			message: 'Please pick a date',
			trigger: 'change',
			type: 'object'
		}
	],
	type: [
		{
			type: 'array',
			required: true,
			message: 'Please select at least one activity type',
			trigger: 'change'
		}
	],
	resource: [
		{
			required: true,
			message: 'Please select activity resource',
			trigger: 'change'
		}
	],
	desc: [
		{
			required: true,
			message: 'Please input activity form',
			trigger: 'blur'
		}
	]
};
const router = useRouter();
const route = useRoute();
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			console.log('values', state.formState, toRaw(state.formState));
			if (route['query']?.id) {
				account.spinning = true;

				updateProgram({
					id: route['query']?.id,
					...state.formState
				})
					.then((res) => {
						account.spinning = false;

						formRef.value.resetFields();
						router.back();
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			} else {
				account.spinning = true;

				addProgram({
					...state.formState
				})
					.then((res) => {
						account.spinning = false;
						formRef.value.resetFields();
						router.back();
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			}
		})
		.catch((error) => {
			account.spinning = false;
			console.log('error', error);
		});
};
const resetForm = () => {
	formRef.value.resetFields();
	router.back();
};
onMounted(() => {
	if (route['query']?.programName) {
		console.log(route['query']);
		state.formState = {
			...route['query']
		};
	}
});
</script>

<template>
	<section class="contain-edit-inbound">
		<section class="edit">编辑入库信息</section>
		<a-form
			ref="formRef"
			:model="state.formState"
			:rules="rules"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-form-item ref="name" label="项目名称" name="programName">
				<a-input v-model:value="state.formState.programName" />
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确认</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
			</a-form-item>
		</a-form>
	</section>
</template>

<style scoped>
.contain-edit-inbound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}
.edit {
	box-sizing: border-box;
	margin: 16px 0;
	text-align: center;
	font-size: 16px;
	list-style: none;
}
</style>
